@import '../../../core/index.less';
.orin-sw-replayer-root {
    .orin-sw-replayer-root{
        width: 100%;
    }
    .orin-sw-replayer-bar{
        position: relative;
        z-index: 1;
    }
    .re-player-stop-btn {
        &:hover{
            background-color: rgba(0, 0, 0, 0.1) !important;
            cursor: default;
        }
    }
    .orin-sw-replayer-tools{
        position: relative;
        z-index: 2;
        height: 30/@remScale;
        margin-top: 10/@remScale;
        li{
            float: left;
            height: inherit;
            cursor: pointer;
            margin-right: 10/@remScale;
            margin-left: 5/@remScale;
            > .orin-sw-reiconbutton-root{
                border-radius: 50%;
                &:hover{
                    background-color: @dark_bgBlackColor8;
                }
            }
            .time-text {
                padding: 0 10/@remScale;
            }
        }
        .time-text{
            line-height: 30/@remScale;
            position: relative;
            cursor: pointer;
            border-radius: @dark_borderRadius;
            &:hover{
                background-color: @dark_bgBlackColor8;
            }
            span{
                color: @dark_fontHighlightColor;
                &.line{
                    padding: 0 5/@remScale;
                    opacity: .5;
                }
            }
        }
        .animation-text{
            color: @dark_fontHighlightColor;
            position: relative;
            &:hover {
                .select-title{
                    background-color: @dark_bgBlackColor8;
                }
            }
            &.show{
                .select-title{
                    background-color: @dark_bgBlackColor8;
                }
                .select-list{
                    display: block;
                }
            }

        }
        .select-title{
            line-height: 30/@remScale;
            padding:0 10/@remScale;
            border-radius: @dark_borderRadius;
        }
        .select-list{
            position: absolute;
            top: -4/@remScale;
            transform: scale(1) translate3d(0,-100%,0);
            background-color: @dark_bgBlackColor8;
            left: 0;
            min-width: 152/@remScale;
            padding: 5/@remScale 12/@remScale;
            border-radius: @dark_borderRadius;
            display: none;
            transition: opacity .3s;
            .selectActive{
                background-color: @dark_bgColor2;
                text-align: right;
                span{
                    float: left;
                }
                i{
                    display: inline-block;
                    vertical-align: middle;
                    width: 16/@remScale;
                    height: 16/@remScale;
                    position: relative;
                    &:after,
                    &:before{
                        content: '';
                        display: block;
                        width: 1/@remScale;
                        background-color: @dark_bgWriteColor;
                        position: absolute;
                    }
                    &:after{
                        height: 5/@remScale;
                        transform: rotate(-45deg);
                        left: 5/@remScale;
                        bottom: 4/@remScale;
                    }
                    &:before{
                        height: 10/@remScale;
                        transform: rotate(45deg);
                        left: 10/@remScale;
                        bottom: 3/@remScale;
                    }
                }
            }
            dt{
                border-bottom: 1px solid @dark_borderGreyColor;
                padding: 5/@remScale 5/@remScale;
                cursor: pointer;
                &.active {
                    .selectActive;
                }
            }
            dd{
                height: 24/@remScale;
                line-height: 24/@remScale;
                font-size: 12/@remScale;
                border-radius: @dark_borderRadius/2;
                margin-top: 8/@remScale;
                margin-bottom: 4/@remScale;
                cursor: pointer;
                padding: 0 5/@remScale;
                &.active{
                    .selectActive;
                }
            }


        }
    }
    .orin-sw-reslider-root{
        &.player-slider{
            .slider-runway{
                height: 2/@remScale;
                background-color: @dark_bgHighlightColor4;
            }
            .slider-bar{
                background-color: transparent;
                height: 2/@remScale;
            }
            .slider-btn{
                width: 14/@remScale;
                height: 14/@remScale;
                border: 2/@remScale solid @dark_bgWriteColor;
                background-color: @dark_bgBlueColor;
                top: -7/@remScale;
            }
        }
    }
}

.theme-dark {

    .orin-sw-replayer-tools{
        li{
            > .orin-sw-reiconbutton-root{
                &:hover{
                    background-color: @dark_bgBlackColor8;
                }
            }
        }
        .time-text{
            border-radius: @dark_borderRadius;
            &:hover{
                background-color: @dark_bgBlackColor8;
            }
            span{
                color: @dark_fontHighlightColor;
            }
        }
        .animation-text{
            color: @dark_fontHighlightColor;
            &:hover {
                .select-title{
                    background-color: @dark_bgBlackColor8;
                }
            }
            &.show{
                .select-title{
                    background-color: @dark_bgBlackColor8;
                }
            }

        }
        .select-title{
            border-radius: @dark_borderRadius;
        }
        .select-list{
            border-radius: @dark_borderRadius;
            .selectActive{
                background-color: @dark_bgColor2;
                i{
                    &:after,
                    &:before{
                        background-color: @dark_bgWriteColor;
                    }
                }
            }
            dt{
                border-bottom: 1px solid @dark_borderGreyColor;
            }


        }
    }
    .orin-sw-reslider-root{
        &.player-slider{
            .slider-runway{
                background-color: @dark_bgHighlightColor4;
            }
            .slider-btn{
                border: 2/@remScale solid @dark_bgWriteColor;
                background-color: @dark_bgBlueColor;
            }
        }
    }
}